<template>
  <div class="user-info">  
    <el-form
      ref="baseForm"
      :model="baseForm"
      :rules="rules"
    >
      <el-form-item prop="username">
        <el-input
          :model-value="baseForm.username"
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
          clearable
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          :model-value="baseForm.password"
          type="password"
          show-password
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-input
          :model-value="baseForm.verify"
          maxlength="4"
          placeholder="请输入验证码"
          onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
        />
        
        <span
          title="刷新"
          @click.prevent="refreshVerify"
        > {{ baseForm.svg }}</span>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click.prevent="onBehavior"
        >
          {{ login_btn }}
        </el-button>
        <el-button @click="resetForm">
          重置
        </el-button>
        <span @click="changeBtn">{{ register_btn }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,PropType,getCurrentInstance,onBeforeMount } from "vue"
// 定义base-form属性
export interface ContextProps {
  username:string
  password:string
  verify:number | string
  svg:any
  telepone?: string
}

export default defineComponent({
  name: "UserInfo",
  props: {
    baseForm: {
      type: Object as PropType<ContextProps>,
      default: () => {return {}}
    }
  },
  emits:["onBehavior","refreshVerify"],// 为了便于管理，建议在emits中定义所有用到的emit
  setup(props, ctx) { // 使用props需要在此处申明
    let vm:any  
    let register_btn = ref("注册")
    let login_btn = ref("登录")

    // 获取组件实例
    onBeforeMount(() => {
      vm = getCurrentInstance()
    })

    console.log(props.baseForm)

    // 表单重置
    const resetForm = ():void => {
      vm.refs.baseForm.resetForm()
    }

    // 登录、注册页面切换
    const changeBtn = ():void => {
      // login_btn.value ==='注册'?
    }

    return {
      register_btn,
      login_btn,
      resetForm,
      changeBtn       
    }
  }
})
</script>
<style lang="less" scoped>

</style>